.repayPlanPage{
	position: absolute;
	left: 0;
	top:0;
	background: #fff;
	.blue{color:#2391ff!important;}
    .red{color: #ff595b!important;}
	.blueBox{
		background: #27a3fd;
		text-align: center;
		p{
			color: #fff;
			font-size: 0.28rem;
		}
		ul li{
			margin: 0.15rem 0;
			float: left;
			width: 33%;
			border-right: 1px solid #5abeff;
		}
		.blueBox  ul li:last-child{
			border: none;
		}
	}
	.totalAmountBox{
		padding: 0.3rem 0;
		border-bottom: 1px solid #5abeff;
		p{
			font-size:0.28rem;
		}
	}
	
	.recordList{
		padding:0.2rem 0.5rem;
		ul li{
			position: relative;
			height: 1.375rem;
			line-height: 0.75rem;
			margin-bottom: 0.4rem;
			.year{
				position: absolute;
				top:-0.36rem;
				left:-0.3rem;
				font-size:0.2rem;
				color: #333;
			}
			.detail{
				position: relative;
				line-height: 0.375rem;
				margin-left: 0.84rem;
				i{
					display: inline-block;
					height: 0.4rem;
					line-height: 0.4rem;
					font-size: 0.24rem;
					padding: 0 0.1rem;
					border-radius: 2px;
					.gray{
						border: 1px solid #8f8f94;
						color: #8f8f94;
					}
					.blue{
						border: 1px solid #268ff8;
						color: #268ff8;
					}
					.red{
						border: 1px solid #ed6066;
						color: #ed6066;
					}
				}
				p:first-child{
					font-size:0.4rem;
					color: #333;
					line-height: 0.7rem;
				}
				p:last-child{
					font-size:12px;
				}
			}
			.line{
				position: absolute;
				left: -0.57rem;
				top:0.225rem;
				width: 0.3rem;
				height: 0.3rem;
				border-radius: 50%;
			}
			.gray{
				border: 0.02rem solid #c2c2c2;
			}
			.gray:before{
				background: #c2c2c2;
			}
			.gray:after{
				background: #c2c2c2;
			}
			.blue{
				border: 0.02rem solid #268ff8;
			}
			.blue:before{
				background: #268ff8;
			}
			.blue:after{
				background: #268ff8;
			}	
			.red{
				border: 0.02rem solid #ed6066;
			}
			.red:before{
				background: #ed6066;
			}
			.red:after{
				background: #ed6066;
			}
			.line:before{
				content: "";
				position: absolute;
				display: block;
				left: 0.05rem;
				top:0.05rem;
				border-radius: 50%;
				width: 0.2rem;
				height: 0.2rem;	
			}
			.line:after{
				content: "";
				position: absolute;
				display: block;
				left: 0.12rem;
				top:0.3rem;
				border-radius: 50%;
				width: 0.02rem;
				height: 1.4rem;
			}
		}
		.last .line:after{
		    display: none;
	    }
	}
}